<template>
  <div class="wrapper">
    <!-- The ref attr used to find the swiper instance -->
    <swiper :options="swiperOption" :not-next-tick="notNextTick" ref="mySwiper">
      <!-- slides -->
      <swiper-slide v-for="item of swiperUrlList" :key="item.id">
        <img :src="item.imgUrl" alt=""  class="swiper-img" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
// swiperSlide: SlideComponent
// swiper: SwiperComponent
// module.exports = swiper

// 局部引用,或者全局引用, 二选一
// import { swiper, swiperSlide } from 'vue-awesome-swiper'
// import 'swiper/dist/css/swiper.css'

export default {
  name: 'HomeSwiper',
  /* 1.这是局部引用的做法, 显然我们全局引用就好了
  components: {
    // swiper,
    // swiperSlide
  },
  */
  props: ['resData'],
  data () {
    return {
      // notNextTick是一个组件自有属性，如果notNextTick设置为true，
      // 组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，
      // 假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
      notNextTick: true,
      swiperOption: {
        // swiper options 所有的配置同swiper官方api配置
        autoplay: 2000,
        speed: 300,
        autoplayStopOnLast: false,
        loop: false,
        direction: 'horizontal', // 默认, 可选vertical
        autoplayDisableOnInteraction: false,

        grabCursor: true, // 鼠标变小手
        setWrapperSize: true, // 在对flexbox布局的支持不是很好的浏览器中可能需要用到
        autoHeight: true, // wrapper和container会随着当前slide的高度而发生变化

        pagination: '.swiper-pagination',
        paginationClickable: true, // 点击分页器也可以切换

        // prevButton: '.swiper-button-prev',
        // nextButton: '.swiper-button-next',
        // scrollbar: '.swiper-scrollbar',

        // mousewheelControl: true, // 鼠标滚轮也可以切换
        observeParents: true
        // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
        // debugger: true,
        // swiper的各种回调函数也可以出现在这个对象中，和swiper官方一样
        /*
        onTransitionStart (swiper) {
          console.log(swiper)
        }
        */
        // more Swiper configs and callbacks...
        // ...
      },
      swiperUrlList: [
        {
          id: '001',
          imgUrl: require('images/swipers/swiper1.jpg')
        },
        {
          id: '002',
          imgUrl: require('images/swipers/swiper2.jpg')
        },
        {
          id: '003',
          imgUrl: require('images/swipers/swiper3.jpg')
        }
      ]
    }
  },
  // 如果你需要得到当前的swiper对象来做一些事情，
  // 你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
  computed: {
    swiper () {
      return this.$refs.mySwiper.swiper
    }
  },
  mounted  () {
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    // console.log('this is current swiper instance object', this.swiper)
    // this.swiper.slideTo(1, 1000, false)
  }
}
</script>

<style lang="stylus" scoped>
  .wrapper >>> .swiper-pagination-bullet-active
    background: #fff
  .wrapper
    width: 100%
    height: 0
    padding-bottom: 30.30%
    overflow: hidden
    background: #eee
    .swiper-img
        width: 100%
</style>
